<template>
  <div id="index">
      <el-container>
        <el-header>
             <top-nav />
        </el-header>
        <el-container>
          <el-aside width="200px" >
              <left-nav />
          </el-aside>
          <el-main>
            <div id="main-box">
              <div class="info-nav-bar">
                <info-nav />
              </div>
              <div class="router-view-index">
                <router-view />
              </div>
            </div>
          </el-main>
        </el-container>
      </el-container>

  </div>
</template>

<script>
  import LeftNav from "@/components/nav/leftNav.vue";
  import TopNav from "@/components/nav/topNav.vue";
  import InfoNav from "@/components/nav/infoNav.vue";

  export default {
    name: 'Index',
    components: {LeftNav,TopNav,InfoNav},

  }
</script>

<style scoped>
    #index{
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      position: relative;
    }
    .el-header{
      padding: 0;
    }
    .el-container{
      height: 100%;
    }
    .el-main{
      padding: 0;
    }
    #main-box{
      position: relative;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      overflow: hidden;
      padding-top: 40px;
    }
    .info-nav-bar{
      position: absolute;
      height: 40px;
      width: 100%;
      top: 0;
      left: 0;
    }
    .router-view-index{
      height: 100%;
      width: 100%;
      overflow: scroll;
      padding-bottom: 100px;
      box-sizing: border-box;
    }
</style>
